<!DOCTYPE html>
<html>
<head>
	{% load static %}
	{%load i18n%}
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>{% block title %}{%trans 'AdminLTE 2 | Dashboard'%}{%endblock%}</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.6 -->
  <link rel="stylesheet" href="{% static "plugins/bootstrap/css/bootstrap.min.css" %}">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="{% static "plugins/font-awesome/css/font-awesome.css" %}">
  <!-- Ionicons -->
  <link rel="stylesheet" href="{% static "plugins/ionicons/css/ionicons.min.css" %}">
  <!-- Theme style -->
  <link rel="stylesheet" href="{% static "css/AdminLTE.min.css" %}">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="{% static "css/skins/_all-skins.min.css" %}">
  <!--toastr css-->
  <link rel="stylesheet" href="{% static "plugins/toastr/toastr.css" %}">
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
    <style type="text/css">
        a.download {
            background: url("{% static "images/down.png" %}") no-repeat 15px center #f0f0f0;
            padding: 10px 10px 10px 20px;
            margin: 20px 40px 20px 0;
            color: #755c3b;
            display: inline-block;
            width: 155px;
            text-align: center;
            border-radius: 5px;
            text-decoration: none;
            font-size: 20px;
        }
    </style>
  {%block css%}{%endblock%}
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

  <header class="main-header">
    <!-- Logo -->
    <a href="{%url 'index' %}" class="logo">
      <!-- mini logo for sidebar mini 50x50 pixels -->
      <span class="logo-mini"><b>{%trans 'W' %}</b>{%trans 'T' %}</span>
      <!-- logo for regular state and mobile devices -->
      <span class="logo-lg"><b>{%trans 'web' %}</b>{%trans 'terminal' %}</span>
    </a>
    <!-- Header Navbar: style can be found in header.less -->
    <nav class="navbar navbar-static-top">
      <!-- Sidebar toggle button-->
      <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
        <span class="sr-only">Toggle navigation</span>
      </a>

      <div class="navbar-custom-menu">
        <ul class="nav navbar-nav">
          <!-- Messages: style can be found in dropdown.less-->
          <li class="dropdown messages-menu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <i class="fa fa-envelope-o"></i>
              <span class="label label-success">4</span>
            </a>
            <ul class="dropdown-menu">
              <li class="header">You have 4 messages</li>
              <li>
                <!-- inner menu: contains the actual data -->
                <ul class="menu">
                  <li><!-- start message -->
                    <a href="#">
                      <div class="pull-left">
                        <img src="{% static "img/user1.jpg" %}" class="img-circle" alt="User Image">
                      </div>
                      <h4>
                        Support Team
                        <small><i class="fa fa-clock-o"></i> 5 mins</small>
                      </h4>
                      <p>Why not buy a new awesome theme?</p>
                    </a>
                  </li>
                  <!-- end message -->
                </ul>
              </li>
              <li class="footer"><a href="#">See All Messages</a></li>
            </ul>
          </li>
          <!-- Notifications: style can be found in dropdown.less -->
          <li class="dropdown notifications-menu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <i class="fa fa-bell-o"></i>
              <span class="label label-warning">10</span>
            </a>
            <ul class="dropdown-menu">
              <li class="header">You have 10 notifications</li>
              <li>
                <!-- inner menu: contains the actual data -->
                <ul class="menu">
                  <li>
                    <a href="#">
                      <i class="fa fa-users text-aqua"></i> 5 new members joined today
                    </a>
                  </li>
                </ul>
              </li>
              <li class="footer"><a href="#">View all</a></li>
            </ul>
          </li>
          <!-- Tasks: style can be found in dropdown.less -->
          <li class="dropdown tasks-menu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <i class="fa fa-flag-o"></i>
              <span class="label label-danger">9</span>
            </a>
            <ul class="dropdown-menu">
              <li class="header">You have 9 tasks</li>
              <li>
                <!-- inner menu: contains the actual data -->
                <ul class="menu">
                  <li><!-- Task item -->
                    <a href="#">
                      <h3>
                        Design some buttons
                        <small class="pull-right">20%</small>
                      </h3>
                      <div class="progress xs">
                        <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                          <span class="sr-only">20% Complete</span>
                        </div>
                      </div>
                    </a>
                  </li>
                  <!-- end task item -->
                </ul>
              </li>
              <li class="footer">
                <a href="#">View all tasks</a>
              </li>
            </ul>
          </li>
          <!-- User Account: style can be found in dropdown.less -->
          <li class="dropdown user user-menu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <img src="{% static "img/user1.jpg" %}" class="user-image" alt="User Image">
              <span class="hidden-xs">{% if request.user %}{{request.user}}{% else %}{{user}}{% endif %}</span>
            </a>
            <ul class="dropdown-menu">
              <!-- User image -->
              <li class="user-header">
                <img src="{% static "img/user1.jpg" %}" class="img-circle" alt="User Image">

                <p>
                  {% if request.user %}{{request.user}}{% else %}{{user}}{% endif %} - DEVOPS Developer
                  <small>Member since Nov. 2012</small>
                </p>
              </li>
              <!-- Menu Body -->
              <li class="user-body">
                <div class="row">
                  <div class="col-xs-4 text-center">
                    <a href="#">Followers</a>
                  </div>
                  <div class="col-xs-4 text-center">
                    <a href="#">Sales</a>
                  </div>
                  <div class="col-xs-4 text-center">
                    <a href="#">Friends</a>
                  </div>
                </div>
                <!-- /.row -->
              </li>
              <!-- Menu Footer-->
              <li class="user-footer">
                <div class="pull-left">
                  <a href="#" class="btn btn-default btn-flat">{%trans 'Profile' %}</a>
                </div>
                <div class="pull-right">
                  <a href="{% url 'logout' %}" class="btn btn-default btn-flat">{%trans 'logout' %}</a>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>
  </header>
  <!-- Left side column. contains the logo and sidebar -->
  <aside class="main-sidebar">
    <!-- sidebar: style can be found in sidebar.less -->
    <section class="sidebar">
      <!-- sidebar menu: : style can be found in sidebar.less -->
      <ul class="sidebar-menu">
        <li class="active treeview">
          <a href="#">
            <i class="fa fa-dashboard"></i> <span>{%trans 'Webterminal' %}</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            {% if perms.common.can_connect_serverinfo %}<li class=""><a href="{% url 'index' %}"><i class="fa fa-laptop"></i> {%trans 'webterminal' %}</a></li>{% endif%}
	    {% if perms.common.can_execute_commandssequence %}<li class=""><a href="{% url 'commandexecute' %}"><i class="fa fa-play"></i> {%trans 'command execute' %}</a></li>{% endif%}
	    {% if perms.common.can_connect_serverinfo %}<li class=""><a href="{% url 'batchcommandexecute' %}"><i class="fa fa-clone"></i> {%trans 'batch command execute' %}</a></li>{% endif%}
	    {% if perms.common.can_add_credential or perms.common.can_change_credential or perms.common.can_delete_credential or perms.common.can_view_credential %}<li class=""><a href="{% url 'credentiallist' %}"><i class="fa fa-list-ol"></i> {%trans 'credential list' %}</a></li>{% endif%}
            {% if perms.common.can_add_serverinfo or perms.common.can_change_serverinfo or perms.common.can_delete_serverinfo or perms.common.can_view_serverinfo %}<li class=""><a href="{% url 'serverlist' %}"><i class="fa fa-certificate"></i> {%trans 'server list' %}</a></li>{% endif%}
            {% if perms.common.can_add_servergroup or perms.common.can_change_servergroup or perms.common.can_delete_servergroup or perms.common.can_view_servergroup %}<li class=""><a href="{% url 'grouplist' %}"><i class="fa  fa-crop"></i> {%trans 'server group list' %}</a></li>{% endif%}
            {% if perms.common.can_add_commandssequence or perms.common.can_change_commandssequence or perms.common.can_delete_commandssequence or perms.common.can_view_commandssequence %}<li class=""><a href="{% url 'commandslist' %}"><i class="fa fa-list"></i> {%trans 'commands list' %}</a></li>{% endif%}
            {% if perms.common.can_delete_log or perms.common.can_view_log or perms.common.can_play_log or perms.common.can_kill_serverinfo or perms.common.can_monitor_serverinfo %}<li class=""><a href="{% url 'logslist' %}"><i class="fa fa-tv"></i> {%trans 'log list' %}</a></li>{% endif%}
	    {% if perms.common.can_view_settings or perms.common.can_change_settings %}<li class=""><a href="{% url 'settings' %}"><i class="fa fa-cog"></i> {%trans 'settings' %}</a></li>{% endif%}
          </ul>
        </li>
      </ul>
    </section>
    <!-- /.sidebar -->
  </aside>

    <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">

    {% block head_ext %}
    <!--&lt;!&ndash; Content Header (Page header) &ndash;&gt;-->
    <!--<section class="content-header">-->
      <!--<h1>-->
	<!--Dashboard-->
	<!--<small>Control panel</small>-->
      <!--</h1>-->
      <!--<ol class="breadcrumb">-->
	<!--<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>-->
	<!--<li class="active">Dashboard</li>-->
      <!--</ol>-->
    <!--</section>-->
    {% endblock %}

    {% block content %}
    <!-- Main content -->
    <!-- /.content -->
    {% endblock %}
  </div>

  <footer class="main-footer">
    <div class="pull-right hidden-xs">
      <b>{%trans 'Version' %}</b> 0.1
    </div>
    <strong>{%trans 'Copyright &copy; 2016-2020' %} <a href="https://github.com/jimmy201602/webterminal">{%trans 'webterminal' %}</a></strong> {%trans 'All rights reserved.' %}
  </footer>


  <!-- Add the sidebar's background. This div must be placed
       immediately after the control sidebar -->
  <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->

<!-- jQuery 2.2.3 -->
<script src="{% static "plugins/jQuery/jquery-2.2.3.min.js" %}"></script>
<!-- jQuery UI 1.11.4 -->
<script src="{% static "plugins/jquery-ui/jquery-ui.min.js" %}"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
  $.widget.bridge('uibutton', $.ui.button);
  var path = window.location.pathname;
  $("[href='"+ path + "']").parent("li").addClass('active')
</script>
<!-- Bootstrap 3.3.6 -->
<script src="{% static "plugins/bootstrap/js/bootstrap.min.js" %}"></script>
<!-- AdminLTE App -->
<script src="{% static "js/app.min.js" %}"></script>
<!-- toastr js-->

<script src="{% static "plugins/toastr/toastr.min.js" %}"></script>

<script>

function getCookie(name) {
	var cookieValue = null;
	if (document.cookie && document.cookie !== '') {
		var cookies = document.cookie.split(';');
		for (var i = 0; i < cookies.length; i++) {
			var cookie = jQuery.trim(cookies[i]);
			// Does this cookie string begin with the name we want?
			if (cookie.substring(0, name.length + 1) === (name + '=')) {
				cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
				break;
			}
		}
	}
	return cookieValue;
}
var csrftoken = getCookie('csrftoken');
function csrfSafeMethod(method) {
	// these HTTP methods do not require CSRF protection
	return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
	beforeSend: function(xhr, settings) {
		if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
			xhr.setRequestHeader("X-CSRFToken", csrftoken);
		}
	}
});


toastr.options = {
    "closeButton": false,
    "debug": false,
    "newestOnTop": false,
    "progressBar": false,
    "positionClass": "toast-top-center",
    "preventDuplicates": false,
    "onclick": null,
    "showDuration": "300",
    "hideDuration": "1000",
    "timeOut": "5000",
    "extendedTimeOut": "1000",
    "showEasing": "swing",
    "hideEasing": "linear",
    "showMethod": "fadeIn",
    "hideMethod": "fadeOut"
}
</script>


<!-- Matomo -->
<script type="text/javascript">
  var _paq = window._paq || [];
  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//193.112.194.114:8002/";
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', '1']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
<!-- End Matomo Code -->


<!--ssh helper detection-->
<script type="application/javascript">
  function sshhelperdetection(id){
    $.ajax({
      url: '{% url 'webterminalhelperdetectapi' %}',
      type: 'POST',
      data: {'identify':id,'protocol':'rdp'},
      success: function(data, textStatus, jqXHR) {
        var ostype = getOS();
        var version = '';
        if (ostype == 'Linux'){
          var subfix = 'deb'
        }else if (ostype == 'Mac'){
          var subfix = 'dmg'
        }else if (ostype == 'Windows'){
          var subfix = 'exe'
        }else{
          toastr['error']("Unsupport system version,Please contact us or submit a issue on github!");
          return false
        }
        if(data.status != true){
          if (ostype == 'Linux'){
            toastr['success']("Currently we only provide webterminal helper for ubuntu 18.04!");
          }
          $('body').prepend('  <div class="container text-center protocoldetection" style="background-color:#8aa4af;width:100%;height: auto">\n' +
                  '  <div>\n' +
                  '  <h1>You haven\'t install webterminal ssh helper,please download and install it. <a class="download" target="_blank" href="https://github.com/jimmy201602/webterminal/raw/master/helper/Webterminal%20Helper'+version + '.'+subfix+'">Download</a>  <button type="button" class="close" aria-label="Close" onclick="$(\'.protocoldetection\').remove()"><span aria-hidden="true">×</span></button>\n' +
                  '\t</h2>\n' +
                  '  </div>\n' +
                  '   </div>')
          if (data.message != 'ok'){
            toastr['error'](data.message);
          }
        }
      },
      error: function(data, textStatus, jqXHR) {
        toastr['error'](data.message);
      }
    });
  };

  function getOS() {
    var sUserAgent = navigator.userAgent;
    var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");
    var isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC") || (navigator.platform == "Macintosh") || (navigator.platform == "MacIntel");
    if (isMac) return "Mac";
    var isUnix = (navigator.platform == "X11") && !isWin && !isMac;
    if (isUnix) return "Unix";
    var isLinux = (String(navigator.platform).indexOf("Linux") > -1);
    if (isLinux) return "Linux";
    if (isWin) return 'Windows';
    // if (isWin) {
    //   var isWin2K = sUserAgent.indexOf("Windows NT 5.0") > -1 || sUserAgent.indexOf("Windows 2000") > -1;
    //   if (isWin2K) return "Win2000";
    //   var isWinXP = sUserAgent.indexOf("Windows NT 5.1") > -1 || sUserAgent.indexOf("Windows XP") > -1;
    //   if (isWinXP) return "WinXP";
    //   var isWin2003 = sUserAgent.indexOf("Windows NT 5.2") > -1 || sUserAgent.indexOf("Windows 2003") > -1;
    //   if (isWin2003) return "Win2003";
    //   var isWinVista= sUserAgent.indexOf("Windows NT 6.0") > -1 || sUserAgent.indexOf("Windows Vista") > -1;
    //   if (isWinVista) return "WinVista";
    //   var isWin7 = sUserAgent.indexOf("Windows NT 6.1") > -1 || sUserAgent.indexOf("Windows 7") > -1;
    //   if (isWin7) return "Win7";
    //   var isWin10 = sUserAgent.indexOf("Windows NT 10") > -1 || sUserAgent.indexOf("Windows 10") > -1;
    //   if (isWin10) return "Win10";
    // }
    return "other";
  }
  {% if detect_webterminal_helper_is_installed %}
  $(document).ready(function () {
    $.ajax({
      url: '{% url 'webterminalhelperdetectapi' %}',
      type: 'POST',
      data: {'identify':'get'},
      success: function(data, textStatus, jqXHR) {
        if(data.status){
          var id = data.message;
          var server_protocol = window.location.protocol;
          var server_host = window.location.host;
          var api_path = '{% url 'webterminalhelperdetectcallbackapi' %}';
          var ssh_protocol_test_path = "wssh://test#" + server_protocol + "//" + server_host + api_path + '#' + data.message;
          window.location.href = ssh_protocol_test_path
          //after 3 second then check ssh helper is installed
          setTimeout(function () {
            sshhelperdetection(id)
          },3000)
        } else {
          toastr['error'](data.message);
        }
      },
      error: function(data, textStatus, jqXHR) {
        toastr['error'](data.message);
      }
    });
  })
  {% endif %}
</script>
<!--end ssh helper detection-->
{%block js%}{%endblock%}
<script>
</script>
</body>
</html>
